<script setup lang="ts">
import bg2 from './block-head-big.png'
import bg1 from './block-head.png'

defineProps<{
  title: string
  isBig?: boolean
}>()
</script>

<template>
  <div
    class="block-head flex items-center indent text-lg font-pmzd"
    :style="{
      backgroundImage: isBig ? `url(${bg2})` : `url(${bg1})`,
    }"
  >
    <span>{{ title }}</span>
    <slot name="extra" />
  </div>
</template>

<style lang="scss" scoped>
.block-head {
  width: 100%;
  height: var(--block-head-height, 2.5rem);
  letter-spacing: 1px;
  line-height: var(--block-head-height, 2.5rem);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: rgba(255,255,255,0.78);
  text-shadow: 0px 2px 2px rgba(0,9,17,0.36);
}
</style>
